import { styled, ThemeProvider, createTheme, alpha } from '@mui/material/styles'
import Toolbar from '@mui/material/Toolbar'
import Logo from '../../../assets/logo.svg'
import { Stack, Typography } from '@mui/material'
import TelegramLogo from '../../../assets/messengerIcons/telegram.svg'
import WhatsupLogo from '../../../assets/messengerIcons/whatsup.svg'
import ViberLogo from '../../../assets/messengerIcons/viber.svg'
import InstagramLogo from '../../../assets/messengerIcons/instagram.svg'
import VkLogo from '../../../assets/messengerIcons/vk.svg'

const section = [
	{ name: 'Каталог', to: 'catalog' },
	{ name: 'Акции', to: 'specials' },
	{ name: 'Новости', to: 'news' },
	{ name: 'Отзывы', to: 'feedback' },
	{ name: 'Оплата и доставки', to: 'delivery' },
	{ name: 'Часто спрашивают', to: 'faq' },
	{ name: 'Обратная связь', to: 'support' },
	{ name: 'Контакты', to: 'contacts' },
]

const theme = createTheme({
	components: {
		MuiToolbar: {
			styleOverrides: {
				root: {
					backgroundColor: '#FFE44D',
				},
			},
		},
	},
})

const StyledFooter = styled(Toolbar)(() => ({
	display: 'flex',
	flexDirection: 'row',
	justifyContent: 'center',
	width: '100%',
	height: '210px',
	gap: '40px',
	position: 'relative',
	left: '0px',
	bottom: '0px',
	zIndex: '999',
}))

const StyledTypography = styled(Typography)(() => ({
	width: '160px',
	height: '14px',
	color: 'rgb(26, 26, 26)',
	fontSize: '16px',
	fontWeight: '600',
	lineHeight: '14px',
	textAlign: 'left',
	display: 'flex',
	alignItems: 'flex-start',
	margin: '19.33px 0px',
}))

const StyledLogos = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'row',
	gap: '15px',
	'& :svg': {
		color: alpha('#000000', 0.15),
	},
}))

const Footer = () => (
	<ThemeProvider theme={theme}>
		<StyledFooter>
			<Stack>
				<Logo />
				<Typography>© «Интернет-магазин DogFood.ru»</Typography>
			</Stack>
			<Stack>
				{section.slice(0, 4).map(({ name, to }) => (
					<StyledTypography key={to}>{name}</StyledTypography>
				))}
			</Stack>
			<Stack>
				{section.slice(4, 8).map(({ name, to }) => (
					<StyledTypography key={to}>{name}</StyledTypography>
				))}
			</Stack>
			<Stack>
				<Typography variant='h4'>Мы на связи</Typography>
				<Typography>8 (999) 00-00-00</Typography>
				<Typography>dogfood.ru@gmail.com</Typography>
				<StyledLogos>
					<TelegramLogo />
					<WhatsupLogo />
					<ViberLogo />
					<InstagramLogo />
					<VkLogo />
				</StyledLogos>
			</Stack>
		</StyledFooter>
	</ThemeProvider>
)

export default Footer
